<template>
    <!-- <div ref="iframeCnt" class="com-cnt"></div> -->
    <div class="com-cnt">
        <div id="margin">
            <!--<img src="" alt="" id="no">-->
            <!-- 点击取消
            <div id="no"></div> -->
            <!--头像-->
            <div class="portrait">
                <div class="photo" :style="{backgroundImage:'url('+bgimg+')',backgroundSize:'100% 100%'}"></div>
            </div>
            <!--输入账号密码-->
            <div class="ipt" v-if="isShow=='true'">
                <div class="logo" style="height:60px">
                    <span class="imgs">
                        <img src="@/assets/imgs/register/phone.png" alt="">
                    </span>
                    <input maxlength="11" type="text" class="user" placeholder="手机号码" id="phoneNo" v-model="postDatas.mobile">
                </div>
                <div class="logo" style="height:60px">
                    <span class="imgs">
                        <img src="@/assets/imgs/register/pass.png" alt="">
                    </span>
                    <input maxlength="18" v-model="postDatas.password" type="password" class="password" placeholder="6到16位数字或字母的密码" id="psw">
                </div>
            </div>
            <!--输入账号密码-->
            <!--输入短信验证码-->
            <div class="ipt" v-if="isShow=='false'">
                <div class="logo" style="height:60px">
                    <span class="imgs">
                        <img src="@/assets/imgs/register/phone.png" alt="">
                    </span>
                    <input maxlength="11" type="text" class="user" placeholder="手机号码" id="phoneNo" v-model="postData.mobile" @blur="phoneBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');">

                </div>
                <div class="logo" style="height:60px">
                    <span class="imgs">
                        <img src="@/assets/imgs/register/sms.png" alt="">
                    </span>
                    <input maxlength="4" v-model="postData.code" type="password" class="password" placeholder="请输入验证码" @blur="codeBlur">
                    <div class="sms" :disabled="!show">
                        <p class="set" v-show="show" @click="getSMSCode()">获取验证码</p>
                        <p v-show="!show" class="count">{{count}} s</p>
                    </div>
                </div>
            </div>
            <!--输入账号密码-->
            <!--协议及找回密码-->

            <div class="down">
                <div class="agre ">
                    <input id="risk" type="checkbox" class="checkbox" checked="checked">
                    <span class="tets">记住账号</span>
                </div>
                <router-link tag="div" to="/zhmm" class="forget">忘记密码
                    <!-- <a href="javascript:void(0)">忘记密码</a> -->
                </router-link>
            </div>

            <!--点击密码按钮-->
            <div class="btn clearfix" v-if="isShow=='true'">
                <router-link to="/register">
                    <button class="btn_register fl" id="toRegister">注册</button>
                </router-link>
                <button class="btn_sign fr" id="toLogin" @click="loginNows">登录</button>
            </div>

            <!--短信登录按钮-->
            <div class="btn clearfix" v-if="isShow=='false'">
                <router-link to="/register">
                    <button class="btn_register fl">注册</button>
                </router-link>
                <button class="btn_sign fr" @click="loginNow">登录</button>
            </div>

            <!-- 切换登陆方式 -->
            <div class="tit" v-if="isShow=='true'" @click="isShow='false'">
                <span>---------</span>
                <span>点击切换手机验证码登陆</span>
                <span>---------</span>
            </div>
            <div class="tit" v-if="isShow=='false'" @click="isShow='true'">
                <span>---------</span>
                <span>点击切换账号密码登陆</span>
                <span>---------</span>
            </div>
        </div>

    </div>
</template>

<script>
import { domain } from '@/assets/js/config'
import http from "@/assets/js/axios"
import axios from 'axios'
import Qs from 'qs'
import $ from 'jquery'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'loginPage',
    components: {

    },
    data() {
        return {
            bgimg: require('../../assets/imgs/xkhlogo.png'),
            mobile: '',
            isShow: 'false',
            postData: {
                mobile: '',
                code: '',
            },
            postDatas: {
                mobile: '',
                password: '',
            },
            show: true,
            count: '',
            timer: null,
        }
    },
    mounted() {
        //设置手机号存储开始
        this.postDatas.mobile = localStorage.getItem('phones') || '';
        this.postData.mobile = localStorage.getItem('phones') || '';
    },
    methods: {
        loginNows: async function () {
            if (this.postDatas.mobile && this.postDatas.password) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.postDatas.mobile)) {
                    maskTips({ id: "phonesd-fail" + new Date().getTime(), txt: "请输入正确的手机号！" });
                } else if (!/^[0-9a-zA-Z]{6,12}$/.test(this.postDatas.password)) {
                    maskTips({ id: "phoneds-fail" + new Date().getTime(), txt: "密码格式格式不正确！" });
                } else {
                    const res = await http.post('xshk/f/home/login', this.postDatas)
                    console.log(res);
                    if (res.data.code == 0) {
                        console.log(res);
                        maskTips({ id: "phonef-fail" + new Date().getTime(), txt: res.data.message });
                        // sessionStorage.setItem('UserInfo', JSON.stringify(res.data.body));

                        // 记录登陆号码开始
                        if (this.postDatas.mobile == localStorage.getItem('phones')) {
                            if ($('#risk').is(":checked")) {
                                localStorage.setItem("phones", this.postDatas.mobile);
                            } else {
                                localStorage.removeItem("phones")
                            }
                        } else if (this.postDatas.mobile != localStorage.getItem('phones')) {
                            if ($('#risk').is(":checked")) {
                                localStorage.setItem("phones", this.postDatas.mobile);
                            } else if ($('#risk').is("checked")) { }
                        }
                        // 记录登陆号码结束
                        localStorage.setItem('token', res.data.data)
                        this.$router.push('/center')


                    } else {
                        maskTips({ id: "phoneg-fail" + new Date().getTime(), txt: res.data.message });
                    }
                }
            } else {
                maskTips({ id: "phoneh-fail" + new Date().getTime(), txt: "请把必填数据填写完整，再提交！" });
            }
        },
        loginNow: async function () {
            if (this.postData.mobile && this.postData.code) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.postData.mobile)) {
                    maskTips({ id: "phones-fail" + new Date().getTime(), txt: "请输入正确的手机号！" });
                } else if (!/^[0-9]{4,6}$/.test(this.postData.code)) {
                    maskTips({ id: "phoned-fail" + new Date().getTime(), txt: "验证码格式不正确！" });
                } else {
                    const res = await http.post('xshk/f/home/messagelogin', this.postData)
                    console.log(res);
                    if (res.data.code == 0) {
                        console.log(res);
                        maskTips({ id: "phoenef-fail" + new Date().getTime(), txt: res.data.message });
                        localStorage.setItem('token', res.data.data)
                        this.$router.push('/center')
                        // 记录登陆号码开始
                        if (this.postData.mobile == localStorage.getItem('phones')) {
                            if ($('#risk').is(":checked")) {
                                localStorage.setItem("phones", this.postData.mobile);
                            } else {
                                console.log(555);
                                localStorage.removeItem("phones")
                            }
                        } else if (this.postData.mobile != localStorage.getItem('phones')) {
                            if ($('#risk').is(":checked")) {
                                localStorage.setItem("phones", this.postData.mobile);
                            } else if ($('#risk').is("checked")) { }
                        }
                        // 记录登陆号码结束



                    } else {
                        maskTips({ id: "phoneg-fail" + new Date().getTime(), txt: res.data.message });
                    }
                }
            } else {
                maskTips({ id: "phoneh-fail" + new Date().getTime(), txt: "请把必填数据填写完整，再提交！" });
            }
        },
        // 验证码验证
        codeBlur: async function () {
            const _this = this
            if (_this.postData.code) {
                _this.usernameTips = false;
                if (!/^[0-9]{4,6}$/.test(_this.postData.code)) {
                    maskTips({ id: "phonej-fail" + new Date().getTime(), txt: "请输入正确的验证码！" });
                }
            } else {
                _this.usernameTips = true;
            }
        },
        // 电话号码验证
        phoneBlur: async function () {
            const _this = this
            if (_this.postData.phone) {
                _this.usernameTips = false;
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(_this.postData.phone)) {
                    maskTips({ id: "phonek-fail" + new Date().getTime(), txt: "请输入正确的手机号！" });
                }
            } else {
                _this.usernameTips = true;
            }
        },
        // 倒计时
        getCode(postData) {
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        },
        //获取验证码
        getSMSCode: async function () {
            if (this.postData.mobile) {
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.postData.mobile)) {
                    // Toast('请输入正确的手机号码！', { duration: 1000 });
                    maskTips({ id: "phonel-fail" + new Date().getTime(), txt: "请输入正确的手机号！" });
                    return false;
                } else {
                    const res = await http.post('xshk/f/pay/password/sendCode', this.postData)
                    console.log(res);
                    if (res.data.code == 0) {
                        this.getCode()
                        // Toast({ message: '注册成功', duration: 1000 })
                        maskTips({ id: "phoneq-fail" + new Date().getTime(), txt: res.data.message });

                    } else {
                        // Toast(res.data.footer.message);
                        maskTips({ id: "phonew-fail" + new Date().getTime(), txt: res.data.message });
                    }
                }
            } else {
                // Toast({ message: '请输入手机号后，再提交！', duration: 2000 })
                maskTips({ id: "phonee-fail" + new Date().getTime(), txt: '请输入手机号后，再提交！' });
            }

        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 20px;

    #margin {
        padding: 0.2rem 0.5rem 0 0.5rem;
        /* background: #000; */
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* 点击取消 */
    #margin #no {
        background: #000;
        width: 0.5rem;
        height: 0.5rem;
        float: right;
    }

    /* 头像 */
    #margin .portrait {
        height: 125px;
        /* background: #f00; */
        padding: 25px 0;
        box-sizing: border-box;
    }

    #margin .portrait .photo {
        width: 100px;
        height: 100px;
        background: #f2f2f2;
        margin: 0 auto;
    }

    /* 输入框 */
    .ipt {
        padding: 0 10px;
        box-sizing: border-box;

        div.logo {
            border-bottom: 1px solid #e4e4e4;
            position: relative;

            input {
                width: 84%;
                height: 40px;
                border: none;
                padding: 5px 0 0 10px;
                outline: none;
                font-size: 16px;
                display: inline-block;
                box-sizing: border-box;
                margin-top: 10px;
                margin-left: 30px;
            }

            .sms {
                position: absolute;
                top: 3px;
                right: 5px;
                display: inline-block;
                margin-top: 10px;
                border: 1px solid #fff;
                background: #fff;
                text-align: center;

                p {
                    width: 119px;
                    height: 36px;
                    line-height: 36px;
                    color: #fff;
                    font-size: 16px;
                    background: #c2df5a;
                    border-radius: 5px;
                }

                p.count {
                    background: #ccc;
                }
            }

            span.imgs {
                position: absolute;
                top: 20px;
                left: 10px;
                width: 16px;
                height: 22px;
                display: inline-block;

                // margin-top: 22px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    /* 点击按钮 */
    .btn {
        margin-top: 1.3rem;

        button {
            font-size: 0.3rem;
            color: #fff;
            width: 48%;
            height: 35px;
            background: #aad114;
            border-radius: 5px;
            border: none;
            outline: none;
            padding: 0;
        }
    }

    .down {
        margin-top: 0.5rem;
    }
    .down .checkbox{
        position absolute 
        left 0
        top -3px
    } 
    .down .tets{
        position absolute 
        left 25px
        display block
        width 60px
    }
    .down a {
        color: #999;
        text-decoration: none;
        outline: none;
        font-size: 30px;
    }

    .down .forget {
        position: absolute;
        right: 70px;
        font-size: 14px;
        color: #aad114;
    }

    .down .agre {
        position: absolute;
        left: 50px;
        font-size: 14px;
        color: #aad114;
    }

    .tit {
        margin-top: 30px;
        text-align: center;
        color: #A7D600;
        font-size: 16px;
    }
}
</style>